<!--
 * @Descripttion: 
 * @version: 
 * @Author: 淏
 * @Date: 2022-09-27 15:28:32
 * @LastEditors: 淏
 * @LastEditTime: 2023-12-02 19:46:26
-->
<template>
  <div>
    <el-date-picker
      size="mini"
      v-model="value"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
      value-format="yyyy-MM-dd HH:mm:ss"
      :default-time="['00:00:00', '23:59:59']"
      :popper-append-to-body="false"
      style="color: #ffffff"
    ></el-date-picker>
  </div>
</template>

<script>
  export default {
    // 组件名称
    name: 'SelectDataSE',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
      return {
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
          disabledDate(time) {
            return time.getTime() > Date.now() + 8.64e7 // 可选历史天、可选当前天、不可选未来天
            // return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选当前天、不可选未来天
            // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选当前天、可选未来天
            // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
          },
        },
        value: '',
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {
      // 被侦听的变量count
      value(value) {
        if (typeof value != 'undefined') {
          this.$emit('getDateSE', value)
        }
      },
    },
    created() {},
    mounted() {},
    // 组件方法
    methods: {},
  }
</script>

<style lang="less" scoped>
  /deep/.el-range-editor--mini .el-range-input {
    color: #ffffff;
  }
  /deep/.el-range-editor--mini .el-range-separator {
    color: #ffffff;
  }
  /deep/.el-picker-panel
    .el-date-range-picker
    .el-popper
    .has-sidebar
    .has-time.el-picker-panel {
    background: rgb(48 128 224 / 44%) !important;
    border: 1px solid #295a85 !important;
    color: #ffffff;
  }
  /deep/ .elDatePicker.el-picker-panel {
    color: #00ffff;
    background: #295a85;
    border: 1px solid #295a85;
    box-shadow: 1px 1px 20px rgba(0, 242, 255, 0.2);
    .el-picker-panel_icon-btn {
      color: #00ffff;
    }
    .el-picker-panel_header-label {
      color: #00ffff;
    }
    .el-picker-panel th {
      color: #00ffff;
    }
  }
</style>
